 <mettingsa charset="utf-8">
<script src="/static/lib/kevinformbuilder/assets/form-config-default.js"></script>
<div class="box box-primary" id="app_signup_template_edit">

<div class="alert alert-warning alert-dismissible" style="margin: 2px;">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                <h4><i class="icon fa fa-ban"></i>提  示</h4>
            		   活动报名需要填写的字段，请通过下面编辑组件进行拖拽编辑
              </div> 
              
              
 <div class="box-header with-border">
  		 <button type="button" class="btn btn-default"  id="clearFields">清理模板</button>
         <button type="button" class="btn btn-default"  id="preViewForm">预览模板</button>
         <button type="button" class="btn btn-info"     id="saveTemplate">保存模板</button>
          <button type="button" class="btn btn-info"     id="testShowSignupInfo">报名显示测试</button>
          
         <button type="button" class="btn btn-default"  id="getXML" style="display: none;">Get XML Data</button>
         <button type="button" class="btn btn-default"  id="getJSON" style="display:none;">Get JSON Data</button>
         <button type="button" class="btn btn-default"  id="showData" style="display: none;">showData</button>
         <button type="button" class="btn btn-default"  id="renderXML" style="display: none;">render From XML</button>
         <button type="button" class="btn btn-default"  id="renderJSON" style="display: none;">render From JSON</button>
 </div>
 <div class="box-body" >
			<div class="row">
				<div class="col-md-12">
					<div id="build-wrap" style="border: medium;background-color: white;padding: 30px; "></div>
				</div>
			</div>
		<div id="render-wrap" style="border: medium;background-color: white;padding: 30px; "></div>
</div>
    <!--  <div class="box-footer">
                 <button type="button" class="btn btn-default" v-on:click="cancel">取消</button>
                 <button type="button" class="btn btn-info pull-right"  v-on:click="doCreate">提交</button>
     </div> -->
</div>


  <script>

  var formRenderOptions = {
			 disabledActionButtons: ['data','save','clear'],
			 onOpenFieldEdit: function(editPanel) {
				 $(".fld-className").attr("readonly","readonly");
				 $(".fld-className").css({"background-color":"#e4e4e4"});
				 $(".fld-name").attr("readonly","readonly");
				 $(".fld-name").css({"background-color":"#e4e4e4"});
				 $(".qq-thumbnail-wrapper").css({"background-color":"#FFF"});
		        },
		        controlConfig: {
		        	 'file.fineuploader': {
				        		js: '/static/lib/fine-uploader/jquery.fine-uploader.min.js',
				        		css: '/static/lib/fine-uploader/fine-uploader.min.css',
				        		handler: '/met/service/tenant/signupDefine/uploadAttaches',
				        		retry: {
				                    enableAuto: false
				                },
				                multiple: false,
				        		 callbacks:{
					                onComplete:  function(id,  fileName,  responseJSON)  {
					                	if(responseJSON.success!=true){
					                		alertSwal.errorText("上传失败");
					                	}
					                	var fileUrl=responseJSON.url;
					                	var element=$(this._options.element);
					                	var uploadContainer= $(element).parent()
					                	var inputId=$(element).attr("id").replace("-wrapper","");
					                	var inputEl=$(uploadContainer).find("#"+inputId+"");
					                	$(inputEl).val(fileUrl);
					                }
				        		} ,
				        		validation: {
				                   // allowedExtensions: ['jpeg', 'jpg', 'gif', 'png']
				                },
				        		 classes: {
				        			  // button: "btn btn-info ",
				        	          // buttonHover: "btn btn-info ",
				        	          // buttonFocus: "btn btn-info ",
				        	          // dropActive:"qq-upload-drop-area-active"
				        	       },
				        		// other fine uploader configuration options here
		        		 }
		        	},
			  controlOrder: [
				   'text',
				   'select',
				   'textarea',
				    'checkbox-group',
				    'checkbox',
				    'date',
				    'file',
				    'header',
				    'hidden',
				    'number',
				    'paragraph',
				    'radio-group',
				    'autocomplete',
				    'button',
				  ],
			    disableFields: [
			      'autocomplete',
			      'paragraph',
			      'header',
			      'hidden',
			      'button'
			    ],
			    disabledSubtypes: {
			    	file: ['file'],
			      },
			      
			     typeUserDisabledAttrs: {
			    	 'file': [
				          'access',
				          'multiple',
				          //'subtype',
				          //'className',
				         // 'name',
				          'other',
				          'value',
				          'description',
				          'toggle'
				   ],
			        'checkbox-group': [
			          'access',
			          //'className',
			          //'name',
			          'other',
			          'value',
			          'description',
			          'toggle'
			        ],
			        'text': [
				          'access',
				          //'className',
				          //'name',
				          'other',
				          'value',
				          'description',
				          'toggle'
				        ],
				     'select': [
					          'access',
					          //'className',
					          //'name',
					          'other',
					          'value',
					          'description',
					          'toggle'
					        ],
					   'textarea': [
						          'access',
						          // 'className',
						         // 'name',
						          'other',
						          'value',
						          'description',
						          'toggle'
						 ],
						 'checkbox': [
					          'access',
					          //'className',
					          //'name',
					          'other',
					          'value',
					          'description',
					          'toggle'
					   ],
					   'date': [
					          'access',
					          // 'className',
					          //'name',
					          'other',
					          'value',
					          'description',
					          'toggle'
					   ],
					   'number': [
					          'access',
					          //'className',
					         // 'name',
					          'value',
					          'other',
					          'description',
					          'toggle'
					   ],
					   'radio-group': [
					          'access',
					          //'className',
					         // 'name',
					          'other',
					          'value',
					          'description',
					          'toggle'
					   ],
					  
			      }, 
			      
			    i18n: {
			        locale: 'zh-CN',
			        location: '/static/lib/kevinformbuilder/assets/loc/'
			      }

			  };
var  formBuilder;
  function initFormEdit(metId){
	  var url="/met/service/tenant/signupDefine/loadSignupModel";
      zfesAjax.ajaxTodo(url,{"metId":metId}, function(data){
    		if(data.data.signupModel.formJson&&data.data.signupModel.formScript){
    			var signupModel=data.data.signupModel;
    			var formJson=jQuery.parseJSON(signupModel.formJson);
        		var formScript=signupModel.formScript;
        		var formScriptConvert=signupModel.formJson; 
        		  $.extend(formRenderOptions, {"defaultFields":formJson});
        		  formBuilder =  $('#build-wrap').formBuilder(formRenderOptions);
    		}else{
    			formBuilder = $('#build-wrap').formBuilder(formRenderOptions);
    		}
    	
		})
  }
  jQuery(function($) {
	  var metId=zfesRoutie.getUrlPatam("metId");
	  initFormEdit(metId);
	 // var formBuilder = $('#build-wrap').formBuilder(formRenderOptions);
	  
	  
	  document.getElementById('saveTemplate').addEventListener('click', function() {
	      var formDataXml=formBuilder.actions.getData('xml')
		  var formDataJson=formBuilder.actions.getData('json', true);
	      var url="/met/service/tenant/signupDefine/createSignupModel";
	      zfesAjax.ajaxTodo(url,{"metId":metId,"formScript":formDataXml,"formJson":formDataJson}, function(data){
  			alertSwal.successText(data.message);
  		})
	  });
	  
	  
	  
	  document.getElementById('getXML').addEventListener('click', function() {
	      alert(formBuilder.actions.getData('xml'));
	  });
	  document.getElementById('getJSON').addEventListener('click', function() {
		  formData=formBuilder.actions.getData('json', true);
	      alert(formData);
	  });
	  
	  
	  document.getElementById('testShowSignupInfo').addEventListener('click', function() {
		  
	  	  var url="/views/tenant/signup/signup.template.sginupreview.html";
	  	  
	      zfesLayerEditDg.open(url,{"metId":metId,"signupId":4},"表单预览",560,function(){});
	     
	  		 
	  });
	  document.getElementById('preViewForm').addEventListener('click', function() {
		  var formDataXml=formBuilder.actions.getData('xml');
		  
		  var formDataJson=formBuilder.actions.getData('json', true);
		  
	  	  var url="/views/tenant/signup/signup.template.formpreview.html";
	  	  
	      zfesLayerEditDg.open(url,{"metId":metId,"formDataXml":formDataXml,"formDataJson":formDataJson},"表单预览",560,function(){});
	     
	  		 
	  });
	  
	  document.getElementById('clearFields').addEventListener('click', function() {
		  formBuilder.actions.clearFields();
	  });
	  
	  
	  document.getElementById('showData').addEventListener('click', function() {
		    formBuilder.actions.showData()
		});
	  
	  
	  
	  document.getElementById('renderJSON').addEventListener('click', function() {
		  
		  var fbRender = document.getElementById('render-wrap');
		  
		   var formDataz = formBuilder.actions.getData('json', true);
		  
	 	 var formRenderOpts = {
		    formData: formDataz,
		    dataType: 'json'
		  };
		  
		 $(fbRender).formRender(formRenderOpts);
		  
		
	  });
	  
	  
	  document.getElementById('renderXML').addEventListener('click', function() {
		  
		  var fbRender = document.getElementById('render-wrap');
		   var formDataz = formBuilder.actions.getData('xml');
		  var formRenderOpts = {
		    formData: formDataz,
		    dataType: 'xml'
		  }; 
		  $(fbRender).formRender(formRenderOpts);
		
	  });
  });
  function clearBtn(){
	  console.log("clearBtn");
	  	$(".clear-all").css('display','none'); 
	    $(".get-data").css('display','none'); 
	    $(".save-template").css('display','none'); 
  }
  </script>
